﻿@model List<mvcajaxinfinitescroll.Models.Book>
@{
    ViewBag.Title = "ASP.NET MVC Infinite Scroll";
}

<meta name="author" content="Hovhannes Bantikyan" />

<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />

<h2>ASP.NET Ajax MVC Infinite Scroll</h2>

<div style="margin-bottom: 50px;">Book List</div>

<div id="bookListDiv">
    @{Html.RenderAction("BookList", "Home", new { Model = Model });}
</div>
<div id="loadingDiv" style="text-align: center; display: none; margin-bottom: 20px;">
    <img alt="Loading" src="@Url.Content("~/Content/Images/ajax-loader.gif")" />
</div>

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    var BlockNumber = 2;  //Infinate Scroll starts from second block
    var NoMoreData = false;
    var inProgress = false;

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {

            inProgress = true;
            $("#loadingDiv").show();
            
            $.post("@Url.Action("InfinateScroll", "Home")", { "BlockNumber": BlockNumber },
                    function (data) {
                        
                        BlockNumber = BlockNumber + 1;
                        NoMoreData = data.NoMoreData;
                        $("#bookListDiv").append(data.HTMLString);
                        $("#loadingDiv").hide();
                        inProgress = false;
                    });
        }
    });
</script>